<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>serviceDefinition</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta content="Preview page of Metronic Admin Theme #1 for form layouts" name="description" />
    <meta content="" name="author" />
    <link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../assets/custom/css/iconfont.css"/>
    <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link href="../assets/global/css/plugins.min.css" rel="stylesheet"  type="text/css" />
    <link rel="stylesheet" href="../assets/global/plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="../assets/custom/css/changeother.css"/>
    <style>
        td[data-field="select"] .layui-table-cell {
            overflow: visible;

        }
        .layui-table-edit:focus{border-color:#20c1dc!important}
        .layui-table-edit
        {
            width:100%;
            height:100%;
        }
        .editionSelected {
        	background:#ceb52d;
        }
    </style>
<body>
<div class="contentPadding">
    <div class="portlet-body">
           <div class="from_control clearfix">
                    <div class="from_control_l">
                        <div class="demoTable">
                            <span class="label_on fl">服务名：</span>
                            <div class="layui-inline data_search fl">
                                <input type="text" class="inputSmall" placeholder="服务名或中文名">
                            </div>
                        </div>
                        <div class="demoTable">
                            <span class="label_on fl">关键表：</span>
                            <div class="layui-inline data_search fl">
                                <input type="text" class="inputSmall" placeholder="表名">
                            </div>
                        </div>
                        <div class="demoTable">
                            <span class="label_on fl">返回字段：</span>
                            <div class="layui-inline data_search fl">
                                <input type="text" class="inputSmall" name="id" id="demoReload" autocomplete="off" placeholder="字段名或中文名">
                            </div>
                            <button class="btn layui-btn blue-hoki fl" data-type="reload">搜索</button>
                        </div>
                    </div>
                    <div class="from_control_r">
                        <div class="btn-group">
                            <a href="" class="btn dark btn-outline btn-circle btn-sm dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">新增
                                <span class="fa fa-angle-down"> </span>
                            </a>
                            <ul class="dropdown-menu pull-right">
                                <li>
                                    <a href="javascript:;" class="process_sql_packaging"> SQL封装服务

                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;" class="process_tb_map"> 数据对象封装服务

                                    </a>
                                </li>
                                <li >
                                    <a href="javascript:;"> 派生服务

                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
           <table class="layui-table" id="LAY_table_user" lay-filter="user"></table>
    </div>
</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn  layui-btn-xs" lay-event="version">版本</a>
</script>

<script type="text/html" id="select">
    <select  lay-filter="business"  class="select"  lay-verify="type" name="business" >
        <option value="北京" selected>北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
        <option value="杭州">杭州</option>
    </select>
</script>

<script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../assets/global/scripts/app.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/layui/layui.all.js"></script>
<script>
    (function () {
        layui.use('table', function(){
            var table = layui.table;
            //方法级渲染
            table.render({
                elem: '#LAY_table_user'
                ,url: 'layui_table.json'
                ,cols: [[
                    {checkbox: true}
                    ,{field:'id', title: '服务名', minWidth:80,}
                    ,{field:'username', title: '服务中文名', minWidth:80}
                    ,{field:'sex', title: '关键表', minWidth:80,}
                    ,{field:'score', title: '默认在线版本', minWidth:80}
                    ,{field:'classify', title: '最新版本', minWidth:80}
                    ,{field:'experience', title: '可用版本数', edit: 'text', minWidth:80}
                    ,{width:200, align:'center', toolbar: '#barDemo',title:'操作'}
                    ,{width:200, align:'center', toolbar: '#select',title:'select',field:'select',event : "select"}
                ]]
                ,id: 'testReload'
                ,page: true
                ,height: 'full-60'
                ,done :function(){
                    /*  console.log('hahha');
                      var kk
                      $('td[data-field="wealth"]').hover(function(e){
                          e.stopPropagation();
                          console.log($(this).offset().top);
                          console.log($(this).offset().left);
                          console.log($(this).parent().attr('data-index'));
                          kk = $(this).parent().attr('data-index');
                          $(document.body).append('<div class="lz'+kk+'" style="background: red;width: 200px;height: 80px;position: absolute;left: '+ $(this).offset().left+'px; top: '+($(this).offset().top - 80)+'px ;">haha</div>')
                      },function(){
                          console.log($('.lz' + kk));
                          $('.lz'+kk).remove()
                      })*/

                    var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
                    var nScrollTop = 0;   //滚动到的当前位置
                    var nDivHight = $(".layui-table-body").height();
                    console.log(nDivHight);
                    $(".layui-table-body").scroll(function () {
                        nScrollHight = $(this)[0].scrollHeight;
                        nScrollTop = $(this)[0].scrollTop;
                        if (nScrollTop + nDivHight >= nScrollHight) {
                           //加载更多数据
                        }
                    });

                    $('a[lay-event="detail"]').click(function (event) {
                        var top = $(this).offset().top + 'px';
                        var left = $(this).offset().left  -240+ 'px';
                        var index = $(this).parents('tr').attr('data-index');
                        var maxTop = parseInt(top) + 130;
                        var bodyHeight = $(document.body).height();
                        if(maxTop > bodyHeight){
                            top = $(this).offset().top -120 + 'px';
                        }
                        
                        if( $('.editionCheck'+index).length >0){
                            $('.versionsCheck').remove();
                            $('.editionSelected').removeClass('editionSelected');
                        }else {
                            $('.versionsCheck').remove();
                            $('.editionSelected').removeClass('editionSelected');
                            var tableStr = '<div class="editionCheck'+index+' versionsCheck" style="position: absolute;left: '+left+';top: '+top+';padding: 15px;border: 1px solid #888;line-height: 25px;background: #fff;"><table style="width: 200px;text-align: center;border: 1px"><thead><th>开发版</th><th>修改图标</th></thead><tbody><tr><td>v3</td><td><a href="javascript:;" class="tableHref">查看图标</a></td><td><a href="javascript:;" class="tableHref">停用图标</a></td><td><a href="javascript:;" class="tableHref">发布图标</a></td></tr><tr><td>v2</td><td><a href="javascript:;" class="tableHref">查看图标</a></td><td><a href="javascript:;" class="tableHref">停用图标</a></td></tr><tr><td>v1</td><td><a href="javascript:;" class="tableHref">查看图标</a></td><td><a href="javascript:;" class="tableHref">停用图标</a></td></tr></tbody></table></div>';
                            $(document.body).append(tableStr);
                            $(this).addClass('editionSelected')
                        }

                    });

                }
            });

            var form = layui.form;
            form.on('select(business)', function(data){
             console.log(data.value);
             console.log($(data.othis[0]).parents("td[data-field=\"select\"]").siblings("[data-field=\"7\"]"))
            });


            table.on('tool(user)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if(layEvent === 'version'){ 
               	   var top = $(this).offset().top + 'px';
                      var left = $(this).offset().left  -240+ 'px';
                      var index = $(this).parents('tr').attr('data-index');
                      var maxTop = parseInt(top) + 130;
                      var bodyHeight = $(document.body).height();
                      if(maxTop > bodyHeight){
                          top = $(this).offset().top -120 + 'px';
                      }
                      
                      if( $('.editionCheck'+index).length >0){
                          $('.versionsCheck').remove();
                          $('.editionSelected').removeClass('editionSelected');
                      }else {
                          $('.versionsCheck').remove();
                          $('.editionSelected').removeClass('editionSelected');
                          var tableStr = '<div class="editionCheck'+index+' versionsCheck" style="position: absolute;left: '+left+';top: '+top+';padding: 15px;border: 1px solid #888;line-height: 25px;background: #fff;"><table style="width: 200px;text-align: center;border: 1px"><thead><th>开发版</th><th>修改图标</th></thead><tbody><tr><td>v3</td><td><a href="javascript:;" class="tableHref">查看图标</a></td><td><a href="javascript:;" class="tableHref">停用图标</a></td><td><a href="javascript:;" class="tableHref">发布图标</a></td></tr><tr><td>v2</td><td><a href="javascript:;" class="tableHref">查看图标</a></td><td><a href="javascript:;" class="tableHref">停用图标</a></td></tr><tr><td>v1</td><td><a href="javascript:;" class="tableHref">查看图标</a></td><td><a href="javascript:;" class="tableHref">停用图标</a></td></tr></tbody></table></div>';
                          $(document.body).append(tableStr);
                          $(this).addClass('editionSelected')
                      }
                      
                } else if(layEvent === 'del'){ 
                    layer.confirm('真的删除行么', function(index){
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                }
            });

            var $ = layui.$, active = {
                reload: function(){
                    var demoReload = $('#demoReload');

                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            key: {
                                id: demoReload.val()
                            }
                        }
                    });
                }
            };

            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });

        $('.btn-group').on('click','a',function () {
            if($(this).hasClass('process_sql_packaging')){
                layer.open({
                    type : 2,
                    area : ["900px","600px"],
                    content : 'sqlPackaging.html'
                })
            }
        });


    })();



</script>
</body>

</html>